import React from 'react'
import {
	Header,
	Footer,
	SideMenu,
	Carousel,
	ProductCollection,
	Partner,
} from '../../components'
import { Row, Col, Typography, Spin } from 'antd'
import styles from './HomePage.module.css'
import { productList1, productList2, productList3 } from './mockups'
import sideImage1 from '../../assets/images/sider_2019_02-04-2.png'
import sideImage2 from '../../assets/images/sider_2019_02-04.png'
import sideImage3 from '../../assets/images/sider_2019_12-09.png'
import { withTranslation, WithTranslation } from 'react-i18next'
import axios from 'axios'
import { connect } from 'react-redux'
import { RootState } from '../../redux/store'
import { giveMeDataActionCreator } from '../../redux/recommendProducts/recommendProductsActions'
import { MainLayout } from '../../layouts/mainLayout'
const mapStateToProps = (state: RootState) => {
	return {
		loading: state.recommendProducts.loading,
		error: state.recommendProducts.error,
		productList: state.recommendProducts.productList,
	}
}

const mapDispatchToProps = (dispatch) => {
	return {
		giveMeData: () => {
			dispatch(giveMeDataActionCreator())
		},
	}
}

type PropsType = WithTranslation &
	ReturnType<typeof mapStateToProps> &
	ReturnType<typeof mapDispatchToProps>

class HomePageComponent extends React.Component<PropsType> {
	componentDidMount() {
		this.props.giveMeData()
	}
	render(): React.ReactNode {
		const { t, productList, loading, error } = this.props
		// const { productList, loading, error } = this.state
		console.log(productList)
		if (loading) {
			return (
				<Spin
					size="large"
					style={{
						marginTop: 200,
						marginBottom: 200,
						marginLeft: 'auto',
						marginRight: 'auto',
						width: '100%',
					}}
				/>
			)
		}
		// if (error) {
		// 	return <div>网站出错了：{error}</div>
		// }
		return (
			<MainLayout>
				<Row style={{ marginTop: 20 }}>
					<Col span={6}>
						<SideMenu />
					</Col>
					<Col span={18}>
						<Carousel />
					</Col>
				</Row>
				<ProductCollection
					title={
						<Typography.Title level={3} type={'warning'}>
							{t('home_page.hot_recommended')}
						</Typography.Title>
					}
					sideImage={sideImage1}
					products={productList1}
				/>
				<ProductCollection
					title={
						<Typography.Title level={3} type={'danger'}>
							{t('home_page.new_arrival')}
						</Typography.Title>
					}
					sideImage={sideImage2}
					products={productList2}
				/>
				<ProductCollection
					title={
						<Typography.Title level={3} type={'success'}>
							{t('home_page.domestic_travel')}
						</Typography.Title>
					}
					sideImage={sideImage3}
					products={productList3}
				/>
				{/* 合作企业 */}
				<Partner />
			</MainLayout>
		)
	}
}
export const HomePage = connect(
	mapStateToProps,
	mapDispatchToProps
)(withTranslation()(HomePageComponent))
